<div class="panel panel-default search-panel">
    <div class="panel-body">
        <div class="pull-left">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="query_account">Account</label>
                    <input type="text" ng-model="query_account" id="query_account" class="form-control" placeholder="工号"/>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="query_name">Name</label>
                    <input type="text" ng-model="query_name" id="query_name" class="form-control" placeholder="姓名"/>
                </div>
                <button type="submit" class="btn btn-default" ng-click="query()">查找</button>
            </form>
        </div>
        <div class="pull-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editDialog">
                创建账号
                <span class="glyphicon glyphicon-plus-sign"></span>
            </button>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<table class="table table-striped table-bordered table-hover">
    <tr>
        <th style="width: 50px;" class="text-center">
            <input type="checkbox" ng-click="toggleAllChk()" ng-model="chk_all"/>
        </th>
        <th>工号</th>
        <th>姓名</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>操作</th>
    </tr>
    <tr ng-repeat="admin in paged.list">
        <td class="text-center">
            <input type="checkbox" name="id" value="{{ admin.id }}"/>
        </td>
        <td>{{ admin.account }}</td>
        <td>{{ admin.name }}</td>
        <td>
            <span ng-class="{'label': true, 'label-success': !admin.disabled, 'label-danger': admin.disabled}">{{ admin.disabled ? '禁用' : '启用' }}</span>
        </td>
        <td>{{ admin.createTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
        <td>
            <button type="button" class="btn btn-primary" ng-click="openPrivilegeDialog(admin)">分配权限</button>
            <ng-switch on="admin.disabled">
                <button ng-switch-when="true" type="button" class="btn btn-primary" data-toggle="modal" ng-click="enable(admin.id)">启用</button>
                <button ng-switch-default type="button" class="btn btn-warning" data-toggle="modal" data-target="#disableDialog"
                        ng-click="setSelectId(admin.id)">禁用
                </button>
            </ng-switch>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#removeDialog" ng-click="setSelectId(admin.id)">删除</button>
        </td>
    </tr>
</table>
<div>
    <div class="pull-left">
        <button type="button" class="btn btn-default" data-toggle="modal" ng-click="openDisableAllDialog()">批量禁用</button>
        <!--<button type="button" class="btn btn-default" data-toggle="modal" ng-click="openRemoveAllDialog()">全部删除</button>-->
    </div>
    <div ng-include="'app/common/view/paged.html'"></div>
    <div class="clearfix"></div>
</div>

<!-- edit dialog -->
<div class="modal fade" id="editDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">创建账号</h4>
            </div>
            <div class="modal-body">
                <div id="editErrorMsg" class="alert alert-danger hide"></div>
                <form class="form-horizontal" role="form" id="editForm">
                    <div id="save_account_group" class="form-group">
                        <label for="save_account" class="col-sm-2 control-label">账号</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="save_account" ng-model="save_account" placeholder="输入账号"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_name" class="col-sm-2 control-label">名称</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="save_name" ng-model="save_name" placeholder="名称" disabled/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_email" class="col-sm-2 control-label">邮箱</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="save_email" ng-model="save_email" placeholder="邮箱" disabled/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="save()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- disable dialog -->
<div class="modal fade" id="disableDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">禁用确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要禁用吗，禁用后该账号将无法登陆</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="disable()">确认禁用</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- disableAll dialog -->
<div class="modal fade" id="disableAllDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">批量禁用确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要批量禁用吗，禁用后该账号将无法登陆</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="disableAll()">确认禁用</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- delete dialog -->
<div class="modal fade" id="removeDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">删除确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要删除吗，删除后该账号将无法登陆</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="remove()">确认删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- deleteAll dialog -->
<div class="modal fade" id="removeAllDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">批量删除确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要批量删除吗，删除后该账号将无法登陆</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="removeAll()">确认删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- edit dialog -->
<div class="modal fade" id="privilegeDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 900px;height: 700px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">分配权限</h4>
            </div>
            <div class="modal-body" style="height: 550px;">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#role_tab">通用角色</a></li>
                    <li><a href="javascript:void(0)" data-toggle="tab" data-target="#collection_tab">集合角色</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="role_tab" style="padding: 20px;">
                        <div ng-repeat="role in roles">
                            <input type="checkbox" id="role_id_{{role.id}}" ng-model="adminRoles[role.id]"/><label for="role_id_{{role.id}}" style="font-weight: normal;">{{role.name}}</label>
                        </div>
                    </div>
                    <div class="tab-pane" id="collection_tab" style="padding: 10px;">
                        <div style="height: 480px;overflow-y:scroll;">
                            <table class="table table-striped table-bordered table-hover text-center">
                                <tr>
                                    <th class="text-center">集合</th>
                                    <th class="text-center" ng-repeat="(roleId, flag) in adminRoles" ng-if="flag">
                                        <input type="checkbox" ng-click="toggleCollectionRole(roleId)" id="toggleAll_{{roleId}}" ng-model="toggleCollectionRoleMap[roleId]"/>
                                        <label for="toggleAll_{{roleId}}">{{ roleMap[roleId].name }}</label>
                                    </th>
                                </tr>
                                <tr ng-repeat="collection in collections">
                                    <td class="text-center" style="font-weight: bold">{{ collection.name }}</td>
                                    <td ng-repeat="(roleId, flag) in adminRoles" class="text-center" ng-click="adminCollections[roleId][collection.id] = !adminCollections[roleId][collection.id]" ng-if="flag">
                                        <input type="checkbox" ng-model="adminCollections[roleId][collection.id]" onclick="event.stopPropagation()"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="savePrivilege()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>